<template>
    <div class="container">
        <Form :model="formTop" label-position="top">
            <div class="title">
                <div class="sub-title"><span>申报类型选择</span></div>
                <div class="history">查看数据库 <Icon type="md-link" /></div>
            </div>
            <div class="sub-content">
                <Row :gutter="20">
                    <Col span="7">
                        <FormItem label="申报人类型">
                            <RadioGroup v-model="dbtype">
                                <Radio label="工作人员" dbtype></Radio>
                                <Radio label="本人" dbtype></Radio>
                                <Radio label="亲属" dbtype></Radio>
                                <Radio label="朋友" dbtype></Radio>
                                <Radio label="同事" dbtype></Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col>
                    <Col span="17">
                        <FormItem label="来沈人员类型">
                            <RadioGroup v-model="lstype">
                                <Radio label="境外旅居" lstype></Radio>
                                <Radio label="境外工作" lstype></Radio>
                                <Radio label="境外留学" lstype></Radio>
                                <Radio label="港澳台人员" lstype></Radio>
                                <Radio label="华人华侨" lstype></Radio>
                                <Radio label="商务旅行外籍人员" lstype></Radio>
                                <Radio label="来沈工作外籍人员" lstype></Radio>
                                <Radio label="来沈留学外籍人员" lstype></Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col>
                </Row>
            </div>
            <div class="title">
                <div class="sub-title"><span>申报人基本信息</span></div>
            </div>
            <div class="sub-content">
                <Row :gutter="20">
                    <Col span="6">
                        <FormItem label="姓名">
                            <Input v-model="formTop.input1"></Input>
                        </FormItem>
                    </Col>
                    <Col span="3">
                        <FormItem label="性别">
                            <Select v-model="model1" style="width:100%">
                                <Option v-for="item in sexType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="3">
                        <FormItem label="年龄">
                            <Input v-model="formTop.input16"></Input>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="证件类型">
                            <Select v-model="model1" style="width:100%">
                                <Option v-for="item in cardType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="证件号码">
                            <Input v-model="formTop.input3"></Input>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="中国境内手机号">
                            <Input v-model="formTop.input6"></Input>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="国外联系手机号码">
                            <Input v-model="formTop.input7"></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="身体状况">
                            <RadioGroup v-model="border">
                                <Radio label="无身体不适" border></Radio>
                                <Radio label="存在咳嗽、腹泻等" border></Radio>
                                <Radio label="存在体温异常(超过37.3℃)" border></Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col>
                </Row>
            </div>
            <div class="title">
                <div class="sub-title"><span>入沈基本信息</span></div>
            </div>
            <div class="sub-content">
                <Row :gutter="20">
                    <Col span="4">
                        <FormItem label="目的地城市">
                            <Select v-model="model1" style="width:100%">
                                <Option v-for="item in distList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="4">
                        <FormItem label="入沈事由">
                            <Select v-model="model1" style="width:100%">
                                <Option v-for="item in reasonList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="16">
                        <FormItem label="在沈居住地址">
                            <Input v-model="formTop.input4"></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="20">
                    <Col span="8">
                        <FormItem label="当前所在国家/地区">
                            <Select v-model="model1" style="width:100%">
                                <Option v-for="item in countryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="途经国家/地区(直航填'无')">
                            <Input v-model="formTop.input5"></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="拟到沈日期">
                            <DatePicker type="date" placeholder="Select date" style="width: 100%"></DatePicker>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="20">
                    <Col span="6">
                        <FormItem label="入境口岸">
                            <Select v-model="model1" style="width:100%">
                                <Option v-for="item in kaList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="到沈交通方式">
                            <Select v-model="model1" style="width:100%">
                                <Option v-for="item in trafficList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="4">
                        <FormItem label="到沈交通工具班次(车次)">
                            <Input v-model="formTop.input8"></Input>
                        </FormItem>
                    </Col>
                    <Col span="4">
                        <FormItem label="机舱等级(车厢号)">
                            <Input v-model="formTop.input8"></Input>
                        </FormItem>
                    </Col>
                    <Col span="4">
                        <FormItem label="座位号">
                            <Input v-model="formTop.input8"></Input>
                        </FormItem>
                    </Col>
                </Row>
            </div>
            <div class="title">
                <div class="sub-title"><span>联系人信息</span></div>
            </div>
            <div class="sub-content">
                <Row :gutter="20">
                    <!--<Col span="8">-->
                    <!--<FormItem label="国内返沈交通工具班次">-->
                    <!--<Input v-model="formTop.input9"></Input>-->
                    <!--</FormItem>-->
                    <!--</Col>-->
                    <Col span="6">
                        <FormItem label="国内联系人姓名">
                            <Input v-model="formTop.input10"></Input>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="国内联系人关系">
                            <Input v-model="formTop.input17"></Input>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="国内联系人联系方式">
                            <Input v-model="formTop.input11"></Input>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="国内联系人家庭住址">
                            <Input v-model="formTop.input12"></Input>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="国外联系人姓名">
                            <Input v-model="formTop.input13"></Input>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="国外联系人关系">
                            <Input v-model="formTop.input18"></Input>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="国外联系人联系方式">
                            <Input v-model="formTop.input14"></Input>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="国外联系人联系地址">
                            <Input v-model="formTop.input15"></Input>
                        </FormItem>
                    </Col>
                </Row>
            </div>
            <div class="btn-op">
                <Button type="warning">提交信息</Button>
            </div>
        </Form>
    </div>
</template>

<script>
export default {
  data () {
    return {
      applyType: [
        {
          value: '本人',
          label: '本人'
        },
        {
          value: '亲属',
          label: '亲属'
        },
        {
          value: '朋友',
          label: '朋友'
        },
        {
          value: '同事',
          label: '同事'
        }
      ],
      sexType: [
        {
          value: '男',
          label: '男'
        },
        {
          value: '女',
          label: '女'
        }
      ],
      cardType: [
        {
          value: '身份证',
          label: '身份证'
        },
        {
          value: '护照',
          label: '护照'
        },
        {
          value: '港澳台通行证',
          label: '港澳台通行证'
        }
      ],
      reasonList: [
        {
          value: '返家',
          label: '返家'
        },
        {
          value: '探亲',
          label: '探亲'
        },
        {
          value: '访友',
          label: '访友'
        },
        {
          value: '工作',
          label: '工作'
        },
        {
          value: '旅游',
          label: '旅游'
        },
        {
          value: '其他',
          label: '其他'
        }
      ],
      distList: [
        {
          value: '沈阳',
          label: '沈阳'
        },
        {
          value: '北京',
          label: '北京'
        },
        {
          value: '其他',
          label: '其他'
        }
      ],
      countryList: [
        {
          value: '美国',
          label: '美国'
        },
        {
          value: '意大利',
          label: '意大利'
        },
        {
          value: '日本',
          label: '日本'
        }
      ],
      kaList: [
        {
          value: '广州',
          label: '广州'
        },
        {
          value: '上海',
          label: '上海'
        }
      ],
      trafficList: [
        {
          value: '飞机',
          label: '飞机'
        },
        {
          value: '火车',
          label: '火车'
        }
      ],
      border: '无身体不适',
      dbtype: '工作人员',
      lstype: '境外旅居',
      formTop: {
        input1: '',
        input2: '',
        input3: '',
        input4: '',
        input5: '',
        input6: '',
        input7: '',
        input8: '',
        input9: '',
        input10: '',
        input11: '',
        input12: '',
        input13: '',
        input14: '',
        input15: '',
        input16: '',
        input17: '',
        input18: ''
      }
    }
  }
}
</script>

<style scoped>
.title {
    padding: 20px 0;
    border-bottom: 1px solid #efefef;
    display: flex;
    justify-content: space-between;
}
.history {
    color: darkred;
    display: flex;
    align-items: center;
}
.sub-title {
    border-left: 7px solid darkred;
    font-size: 18px;
    font-weight: 700;
    padding-left: 10px;
    display: flex;
    justify-content: space-between;
}
.sub-content {
    border: 10px solid #efefef;
    padding: 20px 20px 0 20px;
}
.btn-op {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
</style>
